<template>
    <div>
        <header-search class="g-w100 g-h100 colon">
            <el-button
                type="primary"
                @click="openFormCreate"
            >
                完成创建
            </el-button>
        </header-search>
        <t-card class="list-card-container">
            <div style="width: 100%;height: 90vh;overflow: auto;background-color: #fff;">
                <div style="width: auto;height: 100%;">
                    <v-form-designer
                        class="vfDesignerClass"
                        ref="vfDesignerRef"
                    ></v-form-designer>
                </div>
            </div>
        </t-card>
        <el-dialog
            title="创建表单"
            :visible.sync="dialogFormVisible"
        >
            <el-form
                :model="form"
                ref="form"
                :rules="rules"
            >
                <el-form-item
                    label="表单名字"
                    prop="formName"
                    :label-width="formLabelWidth"
                >
                    <el-input
                        v-model="form.formName"
                        autocomplete="off"
                    ></el-input>
                </el-form-item>
                <el-form-item
                    label="表单内容"
                    prop="formJson"
                    :label-width="formLabelWidth"
                >
                    <el-input
                        v-model="form.formJson"
                        type="textarea"
                        :rows="3"
                        autocomplete="off"
                    ></el-input>
                </el-form-item>
                <el-form-item
                    label="模型"
                    prop="modelId"
                    :label-width="formLabelWidth"
                >
                    <el-select
                        style="width: 100%;"
                        v-model="form.modelId"
                        placeholder="请选择模型"
                        @change="getModelList"
                    >
                        <el-option
                            v-for="item in modelList"
                            :label="item.name"
                            :value="item.id"
                        ></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item
                    label="租户"
                    prop="tenantId"
                    :label-width="formLabelWidth"
                >
                    <el-select
                        style="width: 100%;"
                        v-model="form.tenantId"
                        placeholder="请选择租户"
                        @change="getTenantList"
                    >
                        <el-option
                            v-for="item in tenantList"
                            :label="item.tenantName"
                            :value="item.tenantId"
                        ></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <div
                slot="footer"
                class="dialog-footer"
            >
                <el-button @click="cancelFun">取 消</el-button>
                <el-button
                    type="primary"
                    @click="submitFun"
                >确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script lang="ts">
import Vue from "vue";
import { saveOrUpdate, list, tenantList } from "@/api/mainEntrance/system/process";

// 引入public中的静态文件 
export default Vue.extend({
    name: "FormGenerator",
    components: {
    },
    filters: {
    },
    data() {
        return {
            modelList: [],
            tenantList: [],
            designerConfig: {
                resetFormJson: false,
                toolbarMaxWidth: 490,
            },

            //全局数据源变量
            globalDsv: {
                testApiHost: '',
                testPort: 8080,
            },
            dialogFormVisible: false,
            form: {
                id: '',//主键id
                formName: '',//表单名字
                formJson: '',//表单内容
                modelId: '',//模型id
                tenantId: '',//租户id
                modelKey: '',//模型key
                tenantKey: '',//租户key
            },
            rules: {
                formName: [
                    { required: true, message: '请输入表单名字', trigger: 'blur' },
                ],
                formJson: [
                    { required: true, message: '请编写好表单后复制导出json的文件内容', trigger: 'blur' },
                ],
                modelId: [
                    { required: true, message: '请选择模型', trigger: 'change' },
                ],
                tenantId: [
                    { required: true, message: '请选租户', trigger: 'change' },
                ]
            },
            formLabelWidth: '120px',
        };
    },
    computed: {
    },
    created() {
    },
    mounted() {
        this.$refs.vfDesignerRef.clearDesigner();
    },
    methods: {
        getModelList(value) {
            this.modelList.flatMap(item => {
                if (item.id === value) {
                    this.form.modelKey = item.key;
                }
            })
            console.log(this.form);

        },
        getTenantList(value) {
            this.tenantList.flatMap(item => {
                if (item.tenantId === value) {
                    this.form.tenantKey = item.tenantCode;
                }
            })

        },
        openFormCreate() {
            this.dialogFormVisible = true;
            this.form.formJson = JSON.stringify(this.$refs.vfDesignerRef.getFormJson())
            this.getList();
            this.getTenant();
        },
        getList() {
            let param = {
                order: "desc",
                size: 1000,
                sort: "lastUpdated",
                start: 0,
                tags: []
            };
            list(param).then(response => {
                console.log('response', response);
                this.modelList = response.data;
            }).catch(error => {
                console.log(error);
            });
        },
        getTenant() {
            let param = {
                pageNum: 1,
                pageSize: 1000
            }
            tenantList(param).then(response => {
                console.log('response', response);
                this.tenantList = response.data.rows;
            }).catch(error => {
                console.log(error);
            });
        },
        cancelFun() {
            this.form = {
                id: '',//主键id
                formName: '',//表单名字
                formJson: '',//表单内容
                modelId: '',//模型id
                tenantId: '',//租户id
                modelKey: '',//模型key
                tenantKey: '',//租户key
            };
            this.dialogFormVisible = false;
        },
        submitFun() {
            this.$refs.form.validate((valid) => {
                if (valid) {
                    saveOrUpdate(this.form).then(response => {
                        console.log('response', response);
                        this.dialogFormVisible = false;
                        this.$message.success('保存成功！');
                        this.$router.push({
                            path: '/ProcessCenterManagement/FormTable'
                        })
                    }).catch(error => {
                        console.log(error);
                        this.dialogFormVisible = false;
                        this.$message.error('请重新提交！');
                    });
                } else {
                    console.log('error submit!!');
                    this.dialogFormVisible = false;
                    this.$message.error('请重新提交！');
                    return false;
                }
            });

        },
    }
});
</script>
<style>
.t-table--column-fixed .t-table__cell--fixed-right {
    z-index: 999;
    background-color: #fff;
}
</style>

<style lang="less" scoped>
@import "@/style/variables";

.payment-col {
    display: flex;

    .trend-container {
        display: flex;
        align-items: center;
        margin-left: 8px;
    }
}

.left-operation-container {
    padding: 0 0 6px;
    margin-bottom: 16px;

    .selected-count {
        display: inline-block;
        margin-left: 8px;
        color: var(--td-text-color-secondary);
    }
}

.search-input {
    width: 360px;
}

.t-button + .t-button {
    margin-left: @spacer;
}

.newConcentLeft {
    margin: 16px;
    font-family: PingFangSC, PingFang SC;
    font-weight: 400;
    font-size: 14px;
    color: #19181a;
    line-height: 20px;
    text-align: left;
    font-style: normal;
    white-space: pre-wrap;
    word-wrap: break-word;

    img {
        width: 100%;
    }

    > table {
        width: 100%;
    }

    > pre {
        white-space: normal;
    }
}

.vfDesignerClass /deep/.el-header.main-header[data-v-56b24ae4] {
    border-bottom: 2px dotted #ebeef5;
    height: 60px !important;
    line-height: 48px !important;
    min-width: 800px;
    display: none !important;
}

.vfDesignerClass /deep/.el-header.toolbar-header[data-v-56b24ae4] {
    font-size: 14px;
    border-bottom: 1px dotted #ccc;
    height: auto !important;
}

.vfDesignerClass /deep/.right-toolbar[data-v-7b47c75c] {
    float: left;
    text-align: right;
    overflow: hidden;
    width: 100% !important;
}
</style>
